(function ($) {

	$.fn.sfRadioButton = function(options, value){
		alert("RadioButton(" + $(this).attr('id') + ", " + options + ")");
		
		if (!($(this).data('sfui') == 'Combo')) {
			$(this)
				.data('data', [])		
				.data('index', 0)
				.data('selected', 0)
				.data('focus', false)
                .data('horizontal',options.horizontal)
				.data('sfui', 'Combo')
                .addClass('sf-ui-combo');
		}
		
		//options is a parameter and can to be a object when receive an array
		if (typeof options == 'object') {
			
			var defaults = {
				data: $(this).data('data'),
				index: $(this).data('index') 
			}
			
			//extending options parameter to defaults variable
			var opts = $.extend(defaults, options);
            
			//creating the rows and stored some data
			$(this)
				.html(getDiv(opts.data.length))	
				.data('data', opts.data)
				.data('index', opts.index);
						
			//every rows receive blur effect
			blur(this);	
			
			//Index
			if (options.index != undefined) {		
				$(this).data('focus', true);
				focus(this, opts.index);
			}
			
			//Width
			if(options.width != undefined) {
                $(this).children().css('width',opts.width +'px');
            }
            
			//Height
			if(options.height != undefined) {
				$(this).children().css('height',opts.height +'px');
			}
			
			//Horizontal	
			if(options.horizontal) {
				$(this).children().css('display','inline-block');
			}

			insert(this);
			updateStyle(this, 0, -1);
		}
        
        
		//whether the options parameter as simple string will have behaviors on the RadioButton and your rows
		if (typeof options == 'string') {
			switch (options) {
				
				case 'prev':
				case 'next':
					//Prev / Next are controlled by the component
					if (!$(this).data('focus')) 
					{	
						$(this).sfRadioButton('focus');
						$(this).data('focus', true);
						break;
					}
					
					//Get the last element
					var old = $(this).data('index');
					var data = $(this).data('data');
					var next;
					
					//Calculate the next element
					if (options == 'next')
						next = (Number(old) + 1 > data.length - 1) ? 0 : (Number(old) + 1);
					else 
						next = (Number(old) - 1 < 0) ? data.length - 1 : (Number(old) - 1);
					
					updateStyle(this, next, old);
					
					//Save the Data
					$(this).data('index', next);
					break;
					
				case 'getIndex':
					return $(this).data('index');
					break;
								
				case 'focus':
					focus(this, $(this).data('index'));
					$(this).data('focus', true);
					break;
				
				case 'blur':
					blur(this, $(this).data('index'));
					$(this).data('focus', false);
					break;
				
				case 'select':
					blurSelected (this, $(self).data('selected'));
					select_focus(this, $(this).data('index'));
					$(this).data('focus', true);
					break;
				
				case 'show':
					$(this).show();
					break;
				
				case 'hide': 
					$(this).hide(); 
					break;
					
				default:
					break;
			}
		}
		return this;
	}
	
		
	/**
	 * Insert
	 * Inserts the radiobuttons into the same elemente (group)
	 */
	function insert (self) {
		var data = $(self).data('data');
		var selecter = null;
		
		for (i = 0; i < data.length; i++) {
			selecter = ':nth-child('+(i+1)+')';
			$(self).children(selecter).children(':nth-child(2)').html(data[i]);
		}
		
	}
	
	/**
	 * updateStyle
	 * Manages the style of radio elements
	 */
	function updateStyle (self, next, old) {
		if( next == $(self).data('selected') ) 
		{
			blur (self, old);
			select_focus (self, next);
		} 
		else if ( old == $(self).data('selected') ) 
		{
			select (self, old);
			focus (self, next);
		} 
		else
		{
			blur (self, old);
			focus (self, next);
		}
	}
	
	/**
	 * getDiv
	 * Creates the html structure
	 */
	function getDiv (n) {
		var retValue = '';
		
		for (var i=0; i < n; i++) 
		{
            retValue += '<div class="container"><div class="img" id="' +  i +'"></div><div class="text"></div></div>';
        }
		
		return retValue;
	}
	
	/* Focus */
	function focus (self, index) {
		var selecter = (index === undefined) ? '' : ':nth-child('+(index+1)+')';
		
		if ( $(self).data('selected') != index ) 
			$(self).children(selecter).children(':nth-child(1)').css('background-position','0px -114px');
		else 
			$(self).children(selecter).children(':nth-child(1)').css('background-position','0px -38px');
	}
	
	/* Blur */
	function blur (self, index) {
		var selecter = (index === undefined) ? '' : ':nth-child('+(index+1)+')';
		if ( $(self).data('selected') != index ) 
			$(self).children(selecter).children(':nth-child(1)').css('background-position','0px -76px');
		else 
			select (self, index);
	}
	
	/* Blur Selected */
	function blurSelected (self, index) {
		var selecter = (index === undefined) ? '' : ':nth-child('+(index)+')';
        $(self).children(selecter).children(':nth-child(1)').css('background-position','0px -76px');
	}
	
	/* Select */
	function select (self, index) {
		var selecter = (index === undefined) ? '' : ':nth-child('+(index+1)+')';
		$(self).children(selecter).children(':nth-child(1)').css('background-position','0px 0px');
	}
	
	/* Select_Focus */
	function select_focus (self, index) {
		var selecter = (index === undefined) ? '' : ':nth-child('+(index+1)+')';
		$(self).children(selecter).children(':nth-child(1)').css('background-position','0px -38px');
		$(self).data('selected', index);
	}
	
})(jQuery);